import React, { useState } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';
import bg from './chou.jpg';
import { Card, Input, Pagination, Select } from 'antd';

const { Meta } = Card;
const { Option } = Select;


// const imageUrls = [
//   'https://pic1.zhimg.com/v2-c661740055d91606880283692e40720c_r.jpg',
//   'https://wallpaperm.cmcm.com/4700eaf249b71d56d95aff8ca94313fa.jpg',
//   'https://pic3.zhimg.com/v2-5523ed93593ee4c7fd97b972d0af92d3_r.jpg',
//   'https://pic1.zhimg.com/v2-3e2fe005af51c7636486d2a9a99cfb3e_r.jpg',
//   'https://images7.alphacoders.com/136/1362017.jpeg',
//   'https://images8.alphacoders.com/129/1293291.png',
//   // ... 更多图片链接
// ];

// const getRandomImageUrl = () => {
//   const randomIndex = Math.floor(Math.random() * imageUrls.length);
//   return imageUrls[randomIndex];
// };

// 随机生成名字
// const generateName = async () => {
//   try {
//     const response = await fetch('https://www.behindthename.com/api/');
//     const data = await response.json();
//     return data[0]; // 获取第一个随机名字
//   } catch (error) {
//     console.error('获取名字出错:', error);
//     return '未知卡片';
//   }
// };
const ChouQu = () => {
  const { userId } = useParams();
  const [card, setCard] = useState(null);
  const [error, setError] = useState(null);
  const [Name, setName] = useState(null);

  const handleTrade = async () => {
    try {
      const response = await axios.post('http://localhost:3001/trade', { userId });

      // 根据后端返回的状态码进行判断
      switch (response.status) {
        case 201: // 抽卡成功
          setCard(response.data.cardInfo); // 假设后端返回卡片数据
          // console.log(generateName())
          // card.name = generateName()
          break;
        case 400:
          setError('积分不足，无法抽卡');
          break;
        case 404:
          setError('用户未找到');
          break;
        case 500:
          setError('服务器错误，请稍后再试');
          break;
        default:
          setError('发生未知错误');
      }
    } catch (error) {
      setError('网络错误，请检查网络连接');
      console.error('抽卡出错:', error);
    }
  };

  return (
    <div
      style={{
        backgroundImage: `url(${bg})`, // 设置背景图片
        backgroundSize: 'cover', // 设置背景图片大小
        backgroundPosition: 'center', // 设置背景图片位置
        minHeight: '100vh', // 确保背景图片覆盖整个页面高度
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <h1>Trade Card</h1>
      <button onClick={handleTrade}>Trade Card</button>
      {card && (

        <Card
          key={card.id}
          hoverable
          style={{
            width: 240,
            marginRight: 16,
            marginBottom: 16
          }}
          cover={<img alt="example" src={card.imageUrl} />}
        >
          <Meta
            title={card.name}
            description={
              <div>
                <p>
                  <span>名称:</span> {card.name}
                </p>
                <p>
                  <span>稀有等级:</span> {card.rarity}
                </p>
                <p>
                  <span>攻击力:</span> {card.attack}
                </p>
                <p>
                  <span>防御力:</span> {card.defense}
                </p>
                <p>
                  <span>生命力:</span> {card.health}
                </p>
              </div>
            }
          />
        </Card>

      )}
      {error && (
        <div style={{ color: 'red' }}>
          <p>Error: {error}</p>
        </div>
      )}
    </div>
  );
};

export default ChouQu;